<template>
    <div>
        <van-nav-bar title="我的收藏" style="background-color: #FFD85F;" class="headera">
            <template #left>
                <van-icon name="arrow-left" @click="goBack" />
            </template>
        </van-nav-bar>

        <div style="background-color: #FFF7E1; min-height: 100vh; padding: 10px;">
            <!-- 我的收藏横向卡片列表 -->
            <van-swipe-cell v-for="(item, index) in favorites" :key="item.id" class="dish-item" :right-width="65">
                <!-- 删除按钮 -->
                <template #right>
                    <van-button square type="danger" style="height: 100%;" @click="removeFavorite(item.id, index)">
                        删除
                    </van-button>
                </template>

                <!-- 横向美食卡片 -->
                <div class="dish-card" @click="goToRecipe(item.id)">
                    <van-image :src="item.imageUrl" width="80" height="80" round style="margin-right: 10px;" />
                    <div class="dish-info">
                        <h3>{{ item.name }}</h3>
                        <p>{{ item.description }}</p>
                        <p class="dish-meta">
                            <strong>卡路里:</strong> {{ item.calories }} kcal
                            <br />
                            <strong>蛋白质:</strong> {{ item.protein }} g
                            <strong>脂肪:</strong> {{ item.fat }} g
                            <strong>碳水:</strong> {{ item.carbohydrate }} g
                        </p>
                    </div>
                </div>
            </van-swipe-cell>

            <!-- 空状态 -->
            <div v-if="favorites.length === 0" class="empty-message">
                <p>您还没有收藏任何美食~</p>
            </div>
        </div>
    </div>
</template>


<script>
import axios from 'axios';
import { NavBar, Icon, SwipeCell, Card, Button } from 'vant';

export default {
    components: {
        [NavBar.name]: NavBar,
        [Icon.name]: Icon,
        [SwipeCell.name]: SwipeCell,
        [Card.name]: Card,
        [Button.name]: Button,
    },
    data() {
        return {
            favorites: [], // 收藏列表
            userId: 1, // 当前用户 ID，实际应用中可从 Vuex 或 localStorage 获取
        };
    },
    mounted() {
        this.fetchFavorites(); // 组件挂载后获取收藏数据
    },
    methods: {
        // 返回上一页
        goBack() {
            this.$router.back();
        },

        // 获取收藏列表
        fetchFavorites() {
            axios.get(`http://localhost:8081/wx/favorites/list`, {
                headers: {
                    token: localStorage.getItem('token'), // 添加 Bearer Token 认证
                    'Content-Type': 'application/json' // 确保 Content-Type 正确
                }
            })
                .then(response => {
                    console.log(response)
                    if (response.data.errno === 0) {
                        this.favorites = response.data.data; // 赋值收藏数据
                    } else {
                        this.$toast.fail(response.data.errmsg);
                    }
                })
                .catch(error => {
                    console.error('获取收藏失败:', error);
                    this.$toast.fail('获取收藏失败');
                });
        },

        // 删除收藏
        removeFavorite(recipeId, index) {
            axios.delete(`http://localhost:8081/wx/favorites/delete?recipeId=${recipeId}`, {
                headers: {
                    token: localStorage.getItem('token'), // 添加 Bearer Token 认证
                    'Content-Type': 'application/json' // 确保 Content-Type 正确
                }
            })
                .then(response => {
                    if (response.data.errno === 0) {
                        this.favorites.splice(index, 1); // 前端移除
                        this.$toast.success('已删除收藏');
                    } else {
                        this.$toast.fail(response.data.errmsg);
                    }
                })
                .catch(error => {
                    console.error('删除收藏失败:', error);
                    this.$toast.fail('删除失败');
                });
        },

        // 跳转到食谱详情页
        goToRecipe(recipeId) {
            this.$router.push({ name: 'FoodDetails', params: { id: recipeId } });
        },
    },
};
</script>

<style scoped>
.headera {
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1), -2px -2px 8px rgba(255, 255, 255, 0.5);
}

.dish-item {
    margin-bottom: 10px;
    border-radius: 8px;
    background: #fff7e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


.dish-card {
    display: flex;
    align-items: center;
    padding: 10px;
}

.dish-info {
    flex: 1;
}

.dish-info h3 {
    margin: 0;
    font-size: 1em;
    color: #333;
}

.dish-info p {
    margin: 4px 0;
    font-size: 0.85em;
    color: #555;
}

.dish-meta {
    font-size: 0.8em;
    color: #999;
}

.empty-message {
    text-align: center;
    color: #555;
    font-size: 0.9em;
    margin-top: 20px;
}
</style>
